<template>
  <div class="pd30 produceFactory maintenanPersonList">
    <div class="panelWrap">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>备案查询</div>
      </div>
      <div class="con">
        <div class="con-row flex flexac pl search-box">
          <div class="flex flexac ">
            <el-input v-model="param.name" class="co-input" placeholder="请输入维保公司名称" @input="getRecordList" />
          </div>
          <div class="groupbtn flex m-l-40">
            <el-button class="flex flexac m-r-20 fs14" size="small" type="warning" @click="getRecordList"><i class="co-i" /><span class="search1">查 询</span></el-button>
            <el-button class="flexcenter co-empty m-l-25" type="info" @click="handleEmptySearch"><i class="iconfont icon-qingkong" />清 空</el-button>
          </div>
        </div>
        <div class="con-row flex flexac flexjcsb pl">
          <div>
            <el-button class="defaultbtn" type="primary" @click="handleRefresh"><i class="el-icon-refresh" :class="refresh?'goRefresh':''" />刷 新</el-button>

          </div>
          <div class="m-r-25 flex">

            <el-button class="defaultbtn" type="primary" @click="handleExportExcel"><i class="iconfont icon-wenjiandaochu" />导出</el-button>
            <div class="pre m-l-10">
              <el-button class="defaultbtn pre" type="primary" @click="handleSenior('field')"><i class="iconfont icon-lie" />字段
              </el-button>
              <div class="selectUl br1" :class="seniorSet.field?'showSelectUl':'hideSelectUl'">
                <div v-for="(item,i) in tablehead" :key="i" class="li">
                  <el-checkbox v-model="item.isShow">{{ item.label }}</el-checkbox>
                </div>
              </div>
            </div>
            <div class="pre m-l-10">
              <el-button class="defaultbtn" type="primary" @click="handleSenior('sortable')"><i class="iconfont icon-paixu" />排序</el-button>
              <div class="selectUl br1" :class="seniorSet.sortable?'showSelectUl':'hideSelectUl'">
                <div v-for="(item,i) in tablehead" v-if="item.isShow" :key="i" class="li">
                  <el-checkbox v-model="item.sortable">{{ item.label }}</el-checkbox>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-table
          id="recordData"
          ref="recordData"
          class="con-table"
          type="expand"
          :data="recordData"
          style="width: 100%"
        >
          <template v-for="(item,i) in tablehead">
            <el-table-column v-if="item.isShow" :key="i" align="center" :sortable="item.sortable" :show-overflow-tooltip="true" :prop="item.prop" :label="item.label" />
          </template>

          <el-table-column label="备案状态" align="center">
            <template slot-scope="scope">
              <span :class="`record-${scope.row.auditState}`">{{ scope.row.auditState === 0 ? '待复核' : scope.row.auditState === 1 ? '已复核' : '已拒绝' }}</span>
            </template>
          </el-table-column>
          <!-- prop="name" -->
          <el-table-column label="基本操作" align="center">
            <template slot-scope="scope">
              <el-button class="defaultbtn" type="primary" plain size="mini" @click="handleEdit(scope.$index, scope.row)">
                <i class="el-icon-edit" />
                审 批</el-button>
              <!-- <el-button type="danger" class="defaultbtn" @click="handleDeleteBtn(scope.$index, scope.row)"><i class="el-icon-delete-solid" />删 除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="paginationWrap flex "
          :current-page="paging.currentPage"
          :page-sizes="paging.pageSizeArr"
          :page-size="paging.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <RecordDialog v-model="detailVisible" :data="editData" @handleCloseDialog="handleCloseDialog" @handleRefresh="handleRefresh" />

  </div>
</template>

<script>

import RecordDialog from './dialog/index'
import { unitfilingQueryList } from '@/api/maintenance/unitfiling'
import storage from '@/utils/storage'
import picMixins from '@/utils/picMixins'
import { showNotice, formatDateTime } from '@/utils/toolclass'
import { picturePreview } from '@/api/maintenance/maintenance'

export default {
  name: 'Query',
  components: { RecordDialog },
  mixins: [picMixins],
  props: {},
  data() {
    return {
      paging: {
        currentPage: 1,
        pageSize: 10,
        pageSizeArr: [10],
        total: 0
      },
      recordData: [],
      param: {
        id: '',
        name: ''
      },
      editData: {},
      detailVisible: false,
      isEdit: false,
      selectDataLength: 0,
      refresh: false,
      seniorSet: {
        'field': false,
        'sortable': false
      },
      tablehead: [
        {
          index: 0,
          prop: 'name',
          label: '单位名称',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 1,
          prop: 'socialCreditCode',
          label: '社会统一代码',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 2,
          prop: 'crtDate',
          label: '备案提交时间',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 3,
          prop: 'auditTime',
          label: '备案审核时间',
          sortable: false,
          fixed: true,
          isShow: true
        }
      ]

    }
  },
  computed: {},
  watch: {},
  created() {
    this.userInfo = JSON.parse(storage.get('userInfo'))
  },
  mounted() {
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/government/safety/recordReview/record' }))
    this.getRecordList()
  },
  methods: {
    handleSenior(type) {
      if (type === 'field') {
        this.seniorSet.field = !this.seniorSet.field
        this.seniorSet.sortable = false
      }
      if (type === 'sortable') {
        this.seniorSet.field = false
        this.seniorSet.sortable = !this.seniorSet.sortable
      }
    },
    handleExportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/Export2Excel')
        const tHeader = ['单位名称', '社会统一代码', '备案提交时间', '备案审核时间', '备案状态']
        const filterVal = ['name', 'socialCreditCode', 'crtDate', 'auditTime', 'auditState']
        const data = this.formatJson(filterVal, this.recordData)
        export_json_to_excel(tHeader, data, '单位备案列表(' + formatDateTime().ymd) + ')'
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleRefresh() {
      this.refresh = true
      this.getRecordList()
      setTimeout(() => {
        this.refresh = false
      }, 1200)
    },
    getRecordList() {
      unitfilingQueryList(this.param.id, this.param.name, '', this.paging.currentPage, this.paging.pageSize).then((res) => {
        if (res.code === '000000') {
          // console.log(res.data)
          this.recordData = res.data.filter(item => {
            if (item.auditState === 0) {
              return item
            }
          })
          this.paging = {
            currentPage: res.pager.pageIndex,
            pageSize: res.pager.pageSize,
            total: res.pager.totalSize
          }
        }
      })
    },
    handleEmptySearch() {
      this.param.id = ''
      this.param.name = ''
      this.getRecordList()
    },
    handleEdit(index, row) {
      // this.getImage(row, '')
      this.detailVisible = true
      this.getEdit(row, '')
    },
    async getEdit(row, rate) {
      await picturePreview(row.applyTemplateFileId, rate).then(res => {
        return 'data:image/jpeg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      }).then(data => {
        this.applyImage = data
        return this.applyImage
      })
      await picturePreview(row.businessLicensePicId, rate).then(res => {
        return 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      }).then(data => {
        this.businImage = data
        return this.businImage
      })
      await picturePreview(row.maintainLicensePicId, rate).then(res => {
        return 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      }).then(data => {
        this.maintainImage = data
        return this.maintainImage
      })
      await picturePreview(row.produceLicensePicId, rate).then(res => {
        return 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      }).then(data => {
        this.produceImage = data
        return this.produceImage
      })

      this.editData = {
        address: row.address, // 注册地址
        applyTemplateFileId: row.applyTemplateFileId, // 备案申请表模板文件ID
        applyImage: this.applyImage,
        auditState: row.auditState, // 复核状态（0：待复核；1：已复核；）
        auditTime: row.auditTime, // 复核时间
        businessLicensePicId: row.businessLicensePicId, // 营业执照扫描件图片ID
        businImage: this.businImage,
        chargePerson: row.chargePerson, // 主要负责人
        crtDate: row.crtDate, // 提交时间
        id: row.id,
        introduce: row.introduce, // 介绍
        latitude: row.latitude, // 纬度
        licenseCode: row.licenseCode, // 许可证编号
        licenseExpiryDate: row.licenseExpiryDate, // 许可证有效期
        licenseIssuingAuthority: row.licenseIssuingAuthority, // 许可证发证机关
        licenseIssuingDate: row.licenseIssuingDate, // 许可证发证日期
        licenseProject: row.licenseProject, // 许可项目
        longitude: row.longitude, // 经度
        maintainLicensePicId: row.maintainLicensePicId, // 安装改造维修许可证图片ID
        maintainImage: this.maintainImage,
        name: row.name, // 单位备案名称
        officeAddress: row.officeAddress, // 办公地址
        orgId: row.orgId, // 机构ID
        produceLicensePicId: row.produceLicensePicId, // 特种设备生产许可证图片ID
        produceImage: this.produceImage,
        remark: row.remark, // 备注
        rescuePhone: row.rescuePhone, // 应急救援电话
        reviewerId: row.reviewerId, // 复核人ID
        socialCreditCode: row.socialCreditCode, // 统一社会信用代码
        version: row.version // 版本号
      }
    },
    // handleDeleteBtn(index, row) {
    //   this.$alert('这个操作会删除和它相关联的所有数据,确定要删除吗?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     showCancelButton: true,
    //     callback: action => {
    //       if (action === 'confirm') {
    //         this.handleDelete(row.id)
    //       }
    //     }
    //   })
    // },
    // handleDelete(id) {
    //   unitfiDelete(id).then((res) => {
    //     if (res.code === '000000') {
    //       showNotice('success', '提示', '删除成功')
    //       this.getRecordList()
    //     }
    //   })
    // },
    handleCloseDialog() {
      this.detailVisible = !this.detailVisible
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getRecordList()
    },
    handleCurrentChange(val) {
      this.paging.currentPage = val
      this.getRecordList()
    }
  }
}
</script>
<style scoped lang="scss">
@import '@/styles/public.scss';
.inputLable{
  .nameText{
    font-size: 14px;
    margin-left: 26px;
  }
  input{
    width: 180px !important;
  }
}
.record-0 {
  color: darkgoldenrod;
  font-size: 16px;
  font-weight: 700;
}
.record-1 {
  color: darkgreen;
  font-size: 16px;
  font-weight: 700;
}
.record-2 {
  color: red;
  font-size: 16px;
  font-weight: 700;
}
</style>
